<template>
    <el-form
        ref="form"
        v-bind="$attrs"
        :model="formData"
        :size="size"
        :label-width="labelWidth"
        :label-position="labelPosition"
    >
        <el-row
            :gutter="20"
            style="display: flex; flex-wrap: wrap; flex-direction: row"
        >
            <template
                v-for="(item, index) of formColumn"
                :key="item.elFormItemId || index"
            >
                <el-col
                    :style="{ width: item.width }"
                    v-bind="
                        item.span ? { span: item.span } : item.field || field
                    "
                    :offset="item.offset || 0"
                    :push="item.push || 0"
                    :pull="item.pull || 0"
                >
                    <template v-if="item.slot">
                        <slot :name="item.slot"></slot>
                    </template>
                    <template v-else>
                        <el-form-item
                            :prop="item.prop"
                            :label="item.label"
                            :label-width="item.labelWidth"
                            :label-position="item.labelPosition"
                            :required="item.required"
                            :rules="item.rules"
                            :size="item.size"
                        >
                            <template #label>
                                <span :title="item.label" class="el-1">
                                    {{ item.label }}
                                </span>
                            </template>
                            <template v-if="item.componentName === 'input'">
                                <JrInput
                                    :formData="formData"
                                    v-bind="item"
                                ></JrInput>
                            </template>

                            <template
                                v-if="item.componentName === 'autocomplete'"
                            >
                                <JrAutocomplete
                                    :formData="formData"
                                    v-bind="item"
                                ></JrAutocomplete>
                            </template>

                            <template v-if="item.componentName === 'select'">
                                <JrSelect
                                    :formData="formData"
                                    v-bind="item"
                                ></JrSelect>
                            </template>

                            <template
                                v-if="item.componentName === 'selectremote'"
                            >
                                <JrSelectRemote
                                    :formData="formData"
                                    v-bind="item"
                                ></JrSelectRemote>
                            </template>

                            <template
                                v-if="item.componentName === 'selectremoteurl'"
                            >
                                <JrSelectRemote
                                    :formData="formData"
                                    v-bind="item"
                                ></JrSelectRemote>
                            </template>

                            <template v-if="item.componentName === 'radio'">
                                <JrRadio
                                    :formData="formData"
                                    v-bind="item"
                                ></JrRadio>
                            </template>

                            <template v-if="item.componentName === 'switch'">
                                <JrSwitch
                                    :formData="formData"
                                    v-bind="item"
                                ></JrSwitch>
                            </template>

                            <template
                                v-if="item.componentName === 'inputnumber'"
                            >
                                <JrInputNumber
                                    :formData="formData"
                                    v-bind="item"
                                ></JrInputNumber>
                            </template>

                            <template v-if="item.componentName === 'checkbox'">
                                <JrCheckbox
                                    :formData="formData"
                                    v-bind="item"
                                ></JrCheckbox>
                            </template>

                            <template v-if="item.componentName === 'cascader'">
                                <JrCascader
                                    :formData="formData"
                                    v-bind="item"
                                ></JrCascader>
                            </template>

                            <template
                                v-if="item.componentName === 'timepicker'"
                            >
                                <JrTimePicker
                                    :formData="formData"
                                    v-bind="item"
                                ></JrTimePicker>
                            </template>

                            <template
                                v-if="item.componentName === 'datepicker'"
                            >
                                <JrDatePicker
                                    :formData="formData"
                                    v-bind="item"
                                ></JrDatePicker>
                            </template>

                            <template v-if="item.componentName === 'upload'">
                                <JrUpload
                                    :formData="formData"
                                    v-bind="item"
                                ></JrUpload>
                            </template>
                            <template v-if="item.componentName === 'preview'">
                                <JrPreview
                                    :formData="formData"
                                    v-bind="item"
                                ></JrPreview>
                            </template>
                            <template v-if="item.componentName === 'plaintext'">
                                <JrPlainText
                                    :formData="formData"
                                    v-bind="item"
                                ></JrPlainText>
                            </template>
                            <div
                                v-if="item.tips"
                                v-html="item.tips"
                                style="
                                    font-size: 12px;
                                    font-weight: bold;
                                    line-height: 12px;
                                    padding-top: 1px;
                                    width: 100%;
                                    overflow: hidden;
                                    color: red;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                "
                            ></div>
                        </el-form-item>
                    </template>
                </el-col>
            </template>
            <el-col
                v-if="
                    isShowSearch ||
                    isShowReset ||
                    isShowSubmit ||
                    $slots['form-handler']
                "
                v-bind="btnColSpan ? { span: btnColSpan } : field"
                :style="{ width: btnColWidth }"
            >
                <el-form-item
                    :label-width="btnColWidth ? btnLabelWith || '0px' : '0px'"
                    style="padding-top: 4px"
                >
                    <el-button
                        v-if="isShowSearch"
                        type="primary"
                        :size="'small'"
                        @click="doSearch"
                        :disabled="disabled"
                        ><MetaIcon name="Search"></MetaIcon
                        ><span>查询</span></el-button
                    >
                    <el-button
                        v-if="isShowReset"
                        type="primary"
                        :size="'small'"
                        @click="doResetForm"
                        :disabled="disabled"
                        ><MetaIcon name="Refresh"></MetaIcon
                        ><span>重置</span></el-button
                    >
                    <el-button
                        v-if="isShowSubmit"
                        type="primary"
                        :size="'small'"
                        @click="doSubmit"
                        :disabled="disabled"
                        ><MetaIcon name="Edit"></MetaIcon
                        ><span>提交</span></el-button
                    >
                    <slot name="form-handler"></slot>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import MetaIcon from '@/components/MetaIcon/index.vue'
import JrAutocomplete from './JrAutocomplete.vue'
import JrCascader from './JrCascader.vue'
import JrCheckbox from './JrCheckbox.vue'
import JrDatePicker from './JrDatePicker.vue'
import JrInput from './JrInput.vue'
import JrInputNumber from './JrInputNumber.vue'
import JrRadio from './JrRadio.vue'
import JrSelect from './JrSelect.vue'
import JrSelectRemote from './JrSelectRemote.vue'
import JrSelectRemoteUrl from './JrSelectRemoteUrl.vue'
import JrSwitch from './JrSwitch.vue'
import JrTimePicker from './JrTimePicker.vue'
import JrUpload from './JrUpload.vue'
import JrPreview from './JrPreview.vue'
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'MetaForm',
    components: {
        JrInput,
        JrAutocomplete,
        JrCascader,
        JrCheckbox,
        JrDatePicker,
        JrInputNumber,
        JrRadio,
        JrSelect,
        JrSelectRemote,
        JrSelectRemoteUrl,
        JrSwitch,
        JrTimePicker,
        JrUpload,
        JrPreview
    },
    props: {
        formData: {
            type: Object,
            default: () => ({})
        },
        formColumn: {
            type: Array,
            default: () => []
        },
        getList: {
            type: Function,
            default: () => {}
        },
        field: {
            type: Object,
            default: () => {
                return { xs: 12, sm: 12, md: 8, lg: 6, xl: 4 }
            }
        },
        btnColSpan: {
            type: Number,
            default: 0
        },
        isShowSearch: {
            type: Boolean,
            default: false
        },
        isShowReset: {
            type: Boolean,
            default: false
        },
        isShowSubmit: {
            type: Boolean,
            default: false
        },
        btnColWidth: {
            type: String,
            default: ''
        },
        btnLabelWith: {
            type: [String, Number],
            default: ''
        },
        labelWidth: {
            type: [String, Number],
            default: '100px'
        },
        labelPosition: {
            type: String,
            default: 'left'
        },
        size: {
            type: String,
            default: 'default'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        handlerSearch: {
            type: [Function, Boolean],
            default: false
        },
        handlerReset: {
            type: [Function, Boolean],
            default: false
        }
    },
    watch: {},
    data() {
        return {}
    },
    updated() {},
    mounted() {},
    methods: {
        doSearch() {
            this.formData.PageIndex = 1
            if (typeof this.handlerSearch === 'function') {
                this.handlerSearch()
                return
            }
            this.getList()
        },
        doResetForm() {
            this.$refs.form.resetFields()
            if (typeof this.handlerReset === 'function') {
                this.handlerReset()
                return
            }
            this.getList()
        },
        doSubmit() {
            this.$emit('submit')
        }
    }
})
</script>

<style></style>
